使用 Angular 作為前端開發框架也有兩三年的時間了，這段時間深深能體會到 Angular 是一個非常強大且易學的框架，只要是有點經驗的開發人員，在閱讀過官方的 Tutorial 文件 8 篇文章後，都能夠解決掉大部分的前端需求。

而這次的鐵人賽系列文，則是希望能分享 Tutorial 8 篇文章以外的更多技巧，這些知識可能在官方文件都找得到，也可能是個人的一點經驗；而些知識儘管在平常不一定會使用到，但在適當的時機，卻能幫助我們以更簡潔的程式碼來解決更複雜的問題！

討論範圍

這次系列文還是會以 Angular 官方文件內容為主，加上個人的一些開發經驗，以及深入原始碼後所得到的一些心得，希望能幫助讀者們能在使用 Angular 開發網站時能更加得心應手。由於這系列是以比較進階的內容為主，因此讀者的進入門檻為至少應該能夠理解 Tuorial 文件的 8 篇文章，並有一些基本的開發經驗，以這 8 篇文章來說，讀者應該具有以下基本功力，也就是本系列文章不會著墨太多的部分：

• 具有基本 HTML / CSS / JavaScript 與 TypeScript 知識
• 理解使用 Angular CLI 建立的專案基本架構
• 理解如何使用 Angular CLI 產生程式碼骨架
• 了解基本的資料綁定方式
• 能夠運用 *ngIf 和 *ngFor 等基本的結構指令
• 能夠運用 @Input 和 @Output 讓元件與元件之間溝通
• 了解 Service 的基本觀念
• 懂得使用路由建立多頁面的應用程式
• 懂得使用 HTTP 服務呼叫 API

而以上範圍之外的，就是我們真正要討論的議題，大致上會包含以下幾個大主題：

Angular 各種技巧與觀念

包含各種 Angular 重要的知識與開發技巧，如

• 程式啟動與生命週期管理
• 強大的相依注入
• 樣板語法
• 進階表單 (Reactive Form)
• 模組化設計
• 進階路由
• 其他...

Angular CLI 雖然不是 Angular 框架本身的核心，但強大的功能絕對無法被忽視，所以在這個單元也會一併聊聊更多深入的 Angular CLI 技巧。

Angular 元件設計

在現代網頁程式開發中，將功能切成獨立的元件(components)再組合起來已經幾乎變成常識了，Angular 提供了很多的特色，來幫助我們打造出結實又有彈性的元件，因此從核心功能額外抽出來用幾篇文章來介紹。

Angular 官方生態圈

這部分介紹的是由 Angular 官方開發，但在 Angular CLI 中不會預設安裝的套件，這些套件多半是用來解決特定的問題，如 Server Side Rendering、Angular Elements 等等。

Angular 效能調校

在這個單元中我們將深入學習 Angular 變更偵測等觀念，以及一些效能調校的技巧。

RxJS

RxJS 是 Angular 非常重要的一個環節，卻也是很多 Angular 開發人員心中的痛，要能有一定程度的掌握 RxJS 是有些先決條件的，包含 Functional Programming 和 Reactive Programming，理解這些先決條件可以幫助更容易的掌握 RxJS，這些技術在前端世界也越來越成為顯學，但 Angular 的愛用者通常多半是熟悉物件導向設計的後端工程師，因此在這邊常常會卡住；希望這個單元能幫助 Angular 開發人員減少學習 RxJS 的曲線；同時也會分享一些個人在 Angular 的架構下常用到的 RxJS 技巧。

Testing

儘管不是人人寫測試，但幾乎沒人可以否定撰寫測試程式是非常重要的一件事情，因此一定要花些篇幅來介紹，儘管只會寫基礎的測試程式，對於網站功能的品質也會有很好的幫助！

系列文章架構

由於這個系列的文章內容比較五花八門，基本上每個小主題之間沒有明顯的關聯性，都是可以獨立閱讀的，在每篇文章的開頭會加上以下幾個註記說明：

• 類型：包含「觀念」與「技巧」兩種，「觀念」通常會比較枯燥，但若能理解對於開發會很有幫助；「技巧」則是比較有趣，但可能會需要一些觀念的輔助，才比較好理解。
• 難度：依照個人主觀標示 3~5 顆星
• 實用度：依照個人在實務上的經驗，主觀標示 3~5 顆星

而在每篇文章最下面，都會有數篇的參考資源，提供讀者更進一步的學習。

本日小結

Angular 真的是博大精深易學難精的框架，希望藉由這個系列文章，能幫助各位讀者往 Angular 大師之路向前邁進！！